import React, { Component } from 'react';
let {
  Provider, Consumer
} = React.createContext();
class CartButton extends Component {
  render() {
    return <Consumer>
      {
        ({handleSub,handleAdd})=>{
          let type = this.props.type ==="add"?"+":"-";
          return(
          <button onClick={()=>{
           this.props.type ==="add"?handleAdd():handleSub();
          }}>
            {type}
          </button>
          );
        }}
    </Consumer>
  }
};
class Counter extends Component {
  render() {
    return <Consumer>
      {
        ({ num }) => {
          return <span>{num}</span>;
        }
      }
    </Consumer>
  }
};
class Test extends Component {
  render() {
    return <div>
      {this.props.children}
    </div>
  }
}
class App extends Component {
  state = {
    num: 666
  };
  handleAdd = (params) => {
    this.setState({
      num: this.state.num + 1
    })
  }
  handleSub = (params) => {
    this.setState({
      num: this.state.num - 1
    })
  }
  render() {
    return (
      <div>
        <Provider value={{
          num: this.state.num,
          handleAdd:this.handleAdd,
          handleSub:this.handleSub,
        }}>
          <Test>
            <CartButton type="add"></CartButton>
            <Counter></Counter>
            <CartButton type="sub"></CartButton>
          </Test>
        </Provider>

      </div>
    );
  }
}

export default App;
